<template>
	<view v-if="info">
		<view class="choose-address ">
			<view class="title u-flex-1">{{info.address}}</view>
			<view class="info">{{info.recipient}} {{info.phone}}</view>
		</view>
		<view class="goods-info">
			<view class="u-flex item" @click="jump('/pages/college/goods?id=' + info.goodsId)">
				<image class="goods-img" :src="info.goodsCover"></image>
				<view class="u-flex-1">
					<view class="title u-line-2">{{info.goodsName}}</view>
					<view class="sku"></view>
					<view class="price u-flex">
						<image src="/static/icon2/ib.png"></image>
						<text>{{info.icoin}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="order-info">
			<view class="title">订单信息</view>
			<view class="line">订单编号：{{info.outTradeNo}}</view>
			<view class="line">订单时间：{{info.createTime}}</view>
			<view class="line u-flex" v-if="info.expressNo">
				<text>物流单号：{{info.expressNo}}</text>
				<text class="copy" @click="copy(info.expressNo)">复制</text>
			</view>
		</view>
		
		<view class="safe-area-inset-bottom" style="height: 100rpx;box-sizing: content-box;" v-if="show"></view>
		<view class="safe-area-inset-bottom" v-else></view>
		
		<view class="next safe-area-inset-bottom u-flex" v-if="show">
			<view @click="confirm()">确认收货</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:'',
				show:!1
			}
		},
		methods: {
			getInfo(){
				this.$u.api.orderDetail({
					order_id:this.id
				}).then(res=>{
					this.info = res
				})
			},
			copy(text){
				uni.setClipboardData({
					data:String(text)
				})
			},
			confirm(){
				uni.showModal({
					content:'是否确认收到货物',
					success: (res) => {
						res.confirm && this.$u.api.confirm({
							order_id:this.id
						}).then(res=>{
							this.$u.toast('确认收货成功')
							this.show = !1
						})
					}
				})
			}
		},
		onLoad(o) {
			this.id = o.id
			if(o.show == 'show'){
				this.show = !0
			}
			this.getInfo()
		}
	}
</script>

<style lang="scss">
	page{background-color: #F2F2F2;}
	.choose-address{
		background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin: 20rpx 50rpx 0;
		.title{font-size: 32rpx;font-weight: bold;padding: 10rpx 0;}
		.info{color: #555;}
	}
	.goods-info{
		padding: 0 50rpx;margin-top: 20rpx;
		.item{
			background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin-top: 20rpx;
			&:first-child{margin-top: 0;}
			.goods-img{width: 160rpx;height: 160rpx;border-radius: 20rpx;display: block;flex-shrink: 0;margin-right: 22rpx;}
			.title{font-weight: bold;font-size: 29rpx;line-height: 40rpx;height: 80rpx;}
			.sku{font-size: 26rpx;color: #555;padding-bottom: 10rpx;}
			.price{
				image{display: block;width: 36rpx;height: 36rpx;margin-right: 10rpx;flex-shrink: 0;}
				color: #F55332;font-size: 24rpx;font-weight: bold;
			}
		}
	}
	.order-info{
		background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin: 20rpx 50rpx 0;
		.title{font-weight: bold;font-size: 30rpx;padding-bottom: 10rpx;}
		.line{color: #555;font-size: 28rpx;word-break: break-all;padding: 6rpx 0;
			justify-content: space-between;text-align: justify;
			.copy{color: $tc;white-space: nowrap;margin-left: 20rpx;}
		}
	}
	.next{height: 100rpx;background-color: #fff;width: 100%;position: fixed;left: 0;bottom: 0;justify-content: flex-end;box-sizing: content-box;
		view{background-color: #333;color: #fff;border-radius: 100rpx;padding: 8rpx 30rpx;margin-right: 50rpx;}
	}
</style>
